<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		
		<title>Toma de Decisiones</title>
		
		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" href="css/fonts.css" />
		<script type="text/javascript" charset="utf-8" src="js/cordova-2.9.0.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/library.js"></script>
		<script>
		
			
			$(document).on("pagebeforeshow", "#chance",function(event){
			    //alert(11);
			});
		
			//var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB", "#2E2C75", "#673A7E", "#CC0071", "#F80120", "#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
			//var choices = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];
			var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB"];
			var choices = ["A", "B", "C", "D"];
			
			var startAngle = 0;
			var arc = Math.PI / (choices.length/2);
			var spinTimeout = null;
			
			var spinArcStart = 10;
			var spinTime = 0;
			var spinTimeTotal = 0;
			
			var referenceSize = 125;
			
			var ctx;
			
			function draw() {	
				$("#canvasDiv").center();
				drawRouletteWheel();
			}

			function drawRouletteWheel() {
			
				var canvas = document.getElementById("wheelcanvas");
				if (canvas.getContext) {
					var outsideRadius = 100;
					var textRadius = 80;
					var insideRadius = 65;
					
					ctx = canvas.getContext("2d");
					ctx.clearRect(0,0,500,500);
					
					ctx.strokeStyle = "black";
					ctx.lineWidth = 2;
					
					ctx.font = 'bold 12px sans-serif';
					
					for(var i = 0; i < choices.length; i++) {
						var angle = startAngle + i * arc;
						ctx.fillStyle = colors[i];
						
						ctx.beginPath();
						ctx.arc(referenceSize, referenceSize, outsideRadius, angle, angle + arc, false);
						ctx.arc(referenceSize, referenceSize, insideRadius, angle + arc, angle, true);
						ctx.stroke();
						ctx.fill();
						
						ctx.save();
						ctx.shadowOffsetX = -1;
						ctx.shadowOffsetY = -1;
						ctx.shadowBlur    = 0;
						ctx.shadowColor   = "rgb(220,220,220)";
						ctx.fillStyle = "black";
						ctx.translate(referenceSize + Math.cos(angle + arc / 2) * textRadius, referenceSize + Math.sin(angle + arc / 2) * textRadius);
						ctx.rotate(angle + arc / 2 + Math.PI / 2);
						var text = choices[i];
						ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
						ctx.restore();
					} 
					
					//Arrow
					ctx.fillStyle = "black";
					ctx.beginPath();
					ctx.moveTo(referenceSize - 4, referenceSize - (outsideRadius + 5));
					ctx.lineTo(referenceSize + 4, referenceSize - (outsideRadius + 5));
					ctx.lineTo(referenceSize + 4, referenceSize - (outsideRadius - 5));
					ctx.lineTo(referenceSize + 9, referenceSize - (outsideRadius - 5));
					ctx.lineTo(referenceSize + 0, referenceSize - (outsideRadius - 13));
					ctx.lineTo(referenceSize - 9, referenceSize - (outsideRadius - 5));
					ctx.lineTo(referenceSize - 4, referenceSize - (outsideRadius - 5));
					ctx.lineTo(referenceSize - 4, referenceSize - (outsideRadius + 5));
					ctx.fill();
				}
			}
			 
			function spin() {
				spinAngleStart = Math.random() * 10 + 10;
				spinTime = 0;
				spinTimeTotal = Math.random() * 3 + 4 * 1000;
				rotateWheel();
			}
			
			function rotateWheel() {
				spinTime += 30;
				if(spinTime >= spinTimeTotal) {
				  stopRotateWheel();
				  return;
				}
				var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
				startAngle += (spinAngle * Math.PI / 180);
				drawRouletteWheel();
				spinTimeout = setTimeout('rotateWheel()', 30);
			}
			 
			function stopRotateWheel() {
				clearTimeout(spinTimeout);
				var degrees = startAngle * 180 / Math.PI + 90;
				var arcd = arc * 180 / Math.PI;
				var index = Math.floor((360 - degrees % 360) / arcd);
				ctx.save();
				ctx.font = 'bold 30px sans-serif';
				var text = choices[index]
				ctx.fillText(text, referenceSize - ctx.measureText(text).width / 2, referenceSize + 10);
				ctx.restore();
			}
			
			function easeOut(t, b, c, d) {
				var ts = (t/=d)*t;
				var tc = ts*t;
				return b+c*(tc + -3*ts + 3*t);
			}
			 
		 	$.fn.center = function () {
			    this.css("position","absolute");
			    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
			                                                $(window).scrollTop()) + "px");
			    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
			                                                $(window).scrollLeft()) + "px");
			    return this;
			}		

			
		</script>
	</head>
<body style="text-align:center;" onload="draw();">

	<div  data-role="page" style="display:none;" id="chance"> 
		<div  data-role="header" id="header"  data-position="fixed">
		<img border="0" src="images/img-logo.png" alt="Logo" height="35" width="35" style="float:left; display:inline"/>
		<a href="#" data-icon="gear" class="ui-btn-right">Menu</a>
	</div>  
		<div  data-role="content">
			<input type="button" value="Decide!!" onclick="spin();" style="float:left;" />
			<div id="canvasDiv" onclick="spin();"><canvas id="wheelcanvas" width="250" height="250"></canvas></div>
		</div> 
		<div  data-role="footer" data-position="fixed">
			<button class="button-main-small" onclick="exitAPP();">Salir</button>
		</div>
	</div>
</body>
</html>